<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <link rel="stylesheet" href="assets/css/bootstrap-datetimepicker.min.css" />
    <link rel="stylesheet" href="assets/css/vue-easytable@1.7.2.index.css"/>
    <script type="text/javascript" src="assets/js/jquery3.3.1.min.js"></script>
    <script type="text/javascript" src="assets/js/vue@2.6.10.js"></script>
    <script type="text/javascript" src="assets/js/vue-easytable@1.7.2.index.js"></script>
    <script type="text/javascript" src="assets/js/upload.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap.min.js" ></script>
    <script type="text/javascript" src="assets/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="assets/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript" src="assets/js/transform.js" ></script>
    <script type="text/javascript" src="assets/js/common.js"></script>
    <title>Title</title>
    <style type="text/css">
        #limit {
            width: 75px;
        }
        .form-control {
            width: 75%;
        }
    </style>
</head>
<body>
    <h1 id="welcome">恭喜，登录成功！</h1>
    <div>
        <span class="personattr">上传图片</span>
        <input type="hidden" name="img"  id="thumbUrl"/>
        <input type="file" name="logoFile" id="logoFile" onchange="setImg(this);">
        <span><img id="thumburlShow" src="" width="120" height="120"/></span>
    </div>

    <div id="app">

        <div class="col-sm-offset-10">
            <button type="button" id="quit_btn" class="btn btn-default">退出登录</button>
        </div>

        <div class="btn-group" role="group" aria-label="...">
            <!--<button type="button" id="add_btn" class="btn btn-primary">新增</button>-->
            <button type="button" id="update_btn" class="btn btn-warning" data-toggle="modal" data-target="#updateModal">修改</button>
            <button type="button" id="delete_btn" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">删除</button>
        </div>

        <v-table
                :columns="columns"
                :table-data="tableData"
                :show-vertical-border="true"
                :is-vertical-resize="true"
                :is-loading="isLoading"
                column-width-drag
                row-hover-color="#eee"
                row-click-color="#edf7ff"
        ></v-table>

        <div>
            <nav aria-label="Page navigation" class="col-sm-offset-8 col-sm-4">
                <ul class="pagination " id="pagination">
                    <li id="last" class="disabled">
                        <a href="#" aria-label="Previous" onclick="last_page()">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li><a href="#">{{page}}</a></li>
                    <li id="next">
                        <a href="#" aria-label="Next" onclick="next_page()">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
                <select id="limit" class="form-control" v-model="limit">
                    <option>5</option>
                    <option>10</option>
                    <option>20</option>
                    <option>30</option>
                    <option>50</option>
                </select>
            </nav>
        </div>

        <div class="modal fade" id="updateModal" tabindex="-1" role="dialog" aria-labelledby="updateModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                        <h4 class="modal-title" id="updateModalLabel">用户信息修改</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" id="updateForm" action="#" method="post">
                            <div class="form-group">
                                <div class="form-group">
                                    <label  class="col-sm-3 control-label">学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="sno" placeholder="学号不可修改" name="sno"
                                               readonly="readonly">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label  class="col-sm-3 control-label">用&nbsp;户&nbsp;名&nbsp;</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="username" placeholder="学生姓名" name="username">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label  class="col-sm-3 control-label">密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码</label>
                                    <div class="col-sm-9">
                                        <input type="password" class="form-control" id="password" placeholder="密码仅支持字母和数字" name="password">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label  class="col-sm-3 control-label">生&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日</label>
                                    <div class="col-sm-9">
                                        <input class="form-control" id="birth" name="birth" placeholder="轻点以触发日历选择" />
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label  class="col-sm-3 control-label">所属学院</label>
                                    <div class="col-sm-9">
                                        <select id="faculty" class="form-control"  name="faculty">
                                            <option></option>
                                        </select>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label  class="col-sm-3 control-label">手机号码</label>
                                    <div class="col-sm-9">
                                        <input type="text" id="phone" class="form-control"  name="phone" placeholder="请输入11位电话号码">
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label  class="col-sm-3 control-label">邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱</label>
                                    <div class="col-sm-9">
                                        <input type="text" id="mail" class="form-control" name="mail"  placeholder="请输入正确的邮箱格式">
                                    </div>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary"   id="update_confirm">修改</button>
                    </div>
                </div>
            </div>
        </div>

        <!--<button type="button" class="btn btn-danger"  >删除</button>-->
        <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                        <h4 class="modal-title" id="deleteModalLabel">删除用户</h4>
                    </div>
                    <div class="modal-body">
                        <form>
                            <div class="form-group">
                                <label  class="control-label">确定要删除所选中的用户吗？</label>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">返回</button>
                        <button type="button" class="btn btn-primary"   id="delete_confirm">确认</button>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <script>
        var columns = [
            {
                field: 'custom',
                title: '序号',
                width: 80,
                titleAlign: 'center',
                columnAlign: 'center',
                type: 'selection'
            },
            {
                field: 'sno',
                title: '学号',
                width: 200,
                titleAlign: 'center',
                columnAlign: 'center'
            },
            {
                field: 'username',
                title: '用户名',
                width: 150,
                titleAlign: 'center',
                columnAlign: 'center'
            },
            {
                field: 'birth',
                title: '出生年月',
                width: 300,
                titleAlign: 'center',
                columnAlign: 'center'
            },
            {
                field: 'faculty',
                title: '所在学院',
                width: 200,
                titleAlign: 'center',
                columnAlign: 'center',
                formatter: function (rowData, rowIndex, pagingIndex, field) {
                    // rowData 是一个对象
                    return transformFaculty(rowData['faculty']);
                }
            },
            {
                field: 'phone',
                title: '电话号码',
                width: 200,
                titleAlign: 'center',
                columnAlign: 'center'
            },
            {
                field: 'mail',
                title: '邮箱',
                width: 200,
                titleAlign: 'center',
                columnAlign: 'left'
            }
        ];
        var data;
        var maxPage;
        var users;
        var user;
        var lastTime;

        var vm = new Vue({
            el: '#app',
            data: {
                tableData: users,
                columns: columns,
                isLoading: true,
                page: 1,
                limit: 5
            }
        });

        function get_list() {
            vm.$data.isLoading = true;
            $.ajax({
                url: "user/index",
                type: "GET",
                dataType: "json",
                data: {
                    page: vm.$data.page,
                    limit: vm.$data.limit
                },
                success(res) {
                    data = res['data'];
                    users = data['users'];
                    user = data['user'];
                    maxPage = data['maxPage'];
                    vm.$data.tableData = users;
                    vm.$data.isLoading = false;

                    $('#welcome').text("恭喜"+ user['username'] +",登录成功！");
                    if (lastTime == "") {
                        $('#welcome').append("您已经很久没有登录了");
                    } else {
                        $('#welcome').append("您上次登录是在 " + lastTime);
                    }

                    if(vm.$data.page == maxPage) {
                        $('#next').addClass('disabled');
                    } else {
                        $('#next').removeClass('disabled');
                    }
                    if(vm.$data.page == 1) {
                        $('#last').addClass('disabled');
                    } else {
                        $('#last').removeClass('disabled');
                    }
                }
            })
        }

        function next_page() {
            if(vm.$data.page == maxPage) {

            } else {
                vm.$data.page += 1;
                get_list()
            }
        }

        function last_page() {
            if (vm.$data.page === 1) {

            } else {
                vm.$data.page -= 1;
                get_list()
            }
        }

        /* 暂不清楚作用
        $('#myModal').on('shown.bs.modal', function () {
            $('#myInput').focus()
        });*/

        $('#update_btn').click(function () {
            var checked_span = $('.v-checkbox-checked:first');
            var checked_val = checked_span.get(0).firstChild.value;
            if($('.v-checkbox-checked').length != 1) {
                alert("一次仅可修改一个用户数据！");
            } else {
                var checked_user = vm.$data.tableData[checked_val];
                var sno = checked_user['sno'];
                var username = checked_user['username'];
                var faculty = checked_user['faculty'];
                var birth = checked_user['birth'];
                var phone = checked_user['phone'];
                var mail = checked_user['mail'];
                $('#sno').val(sno);
                $('#username').val(username);
                $('#faculty').val(faculty);
                $('#birth').val(birth);
                $('#phone').val(phone);
                $('#mail').val(mail);
            }
        });

        $('#update_confirm').click(function () {
            var user = $('#updateForm').serializeFormJSON();
            $.ajax({
                url: "/user/update",
                type: "POST",
                dataType: "json",
                data:  JSON.stringify(user),
                contentType: "application/json; charset=utf-8",
                success(res) {
                    var code = res['code'];
                    if(code == 200) {
                        console.log("更新成功！");
                    } else {
                        console.log(res['msg']);
                    }
                    get_list();
                }
            });
            $('#updateModal').modal('hide');
        });

        $('#delete_confirm').click(function () {
            // 获取选中的行标签
            var checked_span = $('.v-checkbox-checked');
            var checked_list = [];
            var sno_list = [];
            for(var i = 0;i < checked_span.length;i++) {
                var checked_val = checked_span.get(i).firstChild.value;
                checked_list.push(checked_val);
            }
            if(checked_list[0] == 'check-all') {
                checked_list.shift();
            }
            for(var i = 0;i < checked_list.length;i++) {
                var sno = (vm.$data.tableData[checked_list[i]]['sno']);
                sno_list.push(sno);
            }
            $.ajax({
                url: "user/delete",
                type: "POST",
                dataType: "json",
                traditional: true,
                data: {
                    snoList: sno_list
                },
                success(res) {
                    var code = res['code'];
                    if (code == 200) {
                        console.log('删除成功');
                        get_list();
                    }
                }
            });
            $('#deleteModal').modal('hide');
        });

        $('#quit_btn').click(function () {
            $.ajax({
               url: "user/quit",
               type: "POST",
               dataType: "json",
               success(res) {
                   var code = res['code'];
                   if (code == 200) {
                       top.location = "login.html";
                   }
               }
            });
        });

        $('#limit').change(function () {
            get_list();
        });

        $(function () {
            lastTime = getCookie("lastLogin");
            get_list();

            var facultyOpt = "";
            for(var i in facultyMap) {
                facultyOpt += "<option value="+ i +">"+ facultyMap[i] +"</option>";
            }
            $('#faculty').append(facultyOpt);

            $("#birth").datetimepicker({
                format: 'yyyy-mm-dd',
                language:  'zh-CN',
                weekStart: 1,
                todayBtn:  1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                forceParse: 0
            });




            // 序列化函数
            $.fn.serializeFormJSON=function(){
                var o={};
                var a=this.serializeArray();
                $.each(a,function(){
                    if(o[this.name]){
                        if(!o[this.name].push){
                            o[this.name]=[o[this.name]];
                        }
                        o[this.name].push(this.value||'');
                    }else{
                        o[this.name]=this.value||'';
                    }
                });
                return o;
            };
        })
    </script>
</body>
</html>
